<template>
	<view class="openanaccount_counter">
		<!-- 英航卡 -->
		<Yinghangcard></Yinghangcard>
		<!-- 基本信息 -->
		<view class="BaseInformation">
			<view class="title">
				<text>基本信息</text>
			</view>
			<view class="Info">
				<view class="first">
					<text class="left">持卡人姓名</text>
					<view class="right" @click="show = true;">
						<text>{{newName}}</text>
					</view>
				</view>
				<view class="first">
					<text class="left">身份证号</text>
					<view class="right" @click="showNum = true;">
						{{newNameNum}}
					</view>
				</view>
				<view class="first">
					<text class="left">开户银行</text>
					<view class="right" @click="showBank = true;">
						<u-icon name="arrow-right" style="font-size: 30rpx;" v-if="c"></u-icon>
						<text v-else>{{bank}}</text>
						<u-select v-model="showBank" mode="single-column" :list="list" @confirm="confirm"></u-select>
					</view>

				</view>
				<view class="first">
					<text class="left">预留手机号</text>
					<view class="right" @click="showPhone = true">
						{{newValue}}
						<u-keyboard mode="number" @change="valChange" @backspace="backspace" v-model="showPhone">
						</u-keyboard>
					</view>
				</view>
			</view>

		</view>
		<!-- 修改预留手机号 -->
		<view class="changePhone">
			<text> 修改预留手机号 </text>
		</view>
		<!-- 尾部 -->
		<view class="foot">
			<view class="top">
				<label class="radio">
					<radio value="" :checked="isRadio" @click="isRadio=!isRadio" />
					<text class="title1">我已阅读</text>
					<text class="title2">惠通金融及工商银行黄金业务相关协议</text>
				</label>
			</view>
			<view class="bottom" @click="openAnCcount">
				<text>立即开户</text>
			</view>
		</view>
		<!-- 持卡人姓名弹出框 -->
		<u-popup mode="center" v-model="show" :zoom="true" :closeable="false" width="640rpx" height="474rpx"
			border-radius=20>
			<view class="content">
				<text class="title">持卡人姓名</text>
				<input type="text" value="" v-model="name" placeholder="请输入姓名" class="input"
					style="background-color: #f8f8f8;width: 80%;font-weight: 550;padding: 0 10rpx;" />
				<view class="confrim-btn" style="display: flex;">
					<button class="queding" type="default" @click="show = false;">取消</button>
					<button class="quxiao" type="default" @click="show = false">确定</button>
				</view>
			</view>
		</u-popup>
		<!-- 身份证号弹出框 -->
		<u-popup mode="center" v-model="showNum" :zoom="true" :closeable="false" width="640rpx" height="474rpx"
			border-radius=20>
			<view class="content">
				<text class="title">身份证号</text>
				<input type="text" value="" v-model="nameNum" placeholder="请输入身份证号码" class="input"
					style="background-color: #f8f8f8;width: 80%;font-weight: 550;padding: 0 10rpx;" />
				<view class="confrim-btn" style="display: flex;">
					<button class="queding" type="default" @click="showNum = false;">取消</button>
					<button class="quxiao" type="default" @click="showNum = false;">确定</button>
				</view>
			</view>
		</u-popup>
		<!--完善形象 -->
		<u-popup mode="center" v-model="isOpenAnCcount" :zoom="true" :closeable="false" width="640rpx" height="474rpx"
			border-radius=20>
			<view class="content">
				<text class="title">交易提示</text>

				<view class="center_open">
					<text>
						根据《互联网金融从业机构和反洗钱恐怖管理办法》等监督要求,金融用户需要上传身份证职业等信息,你未补全个人信息,为符合监督要求,请完善个人信息
					</text>
				</view>
				<view class="confrim-btn" style="display: flex;">

					<button class="queding" type="default" @click="isOpenAnCcount = false;">取消</button>
					<button class="quxiao" type="default" @click="isOpenAnCcount= false;">立即完善</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Yinghangcard from '../../components/openanaccount/yinghangcard.vue'
	export default {
		components: {
			Yinghangcard
		},
		data() {
			return {
				isOpenAnCcount: false, //点击开户按钮判断是否需要弹出
				isRadio: false, //判断单选按钮是否被选中
				show: false, //点击吃啊卡人姓名弹出框
				showNum: false, //点击弹出身份证弹出框
				name: "", //开户人的名字
				nameNum: "", //开户人的身份证
				showBank: false, //点击弹出开户英航的下拉框
				showPhone: false, //点击弹出输入键盘
				value: "", //开户人的手机号
				list: [{
						value: '1',
						label: '中国工商银行'
					},
					{
						value: '2',
						label: '中国农业英航'
					}
				],
				bank: '', //下拉框的值
				c: true, //开户英航默认显示图标，有值显示bank

			}
		},
		computed: {
			newName() {
				if (this.name) {
					// 截取最后一位为字符串其余为星号
					return new Array(this.name.length).join('*') + this.name.substr(-1);
				} else {
					return "请输入姓名"
				}
			},
			newNameNum() {
				if (this.nameNum) {
					//this.nameNum.replace(/(\d{3})\d{10}(\d{5})/, '$1********$2')
					return this.nameNum.replace(/\d{11}(\d{4})/, '**** **** *** 2')
				} else {
					return "请输入身份证号码"
				}
			},
			newValue() {
				if (this.value) {
					const a = this.value.substring(0, 3) + " " + '****' + " " + this.value.substring(7); // 134****9812
					return a
				} else {
					return "请输入身银行预留手机号码"
				}
			}
		},
		methods: {
			// 截取最后一位为字符串其余为星号
			formatName(str) {
				return new Array(str.length).join('*') + str.substr(-1);
			},
			open() {
				this.show = true;
			},
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			confirm(e) {
				console.log(e[0].label);
				this.bank = e[0].label
				this.c = false
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.value += val;
				this.isshowPhone = false
				console.log(this.value);
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.value.length) this.value = this.value.substr(0, this.value.length - 1);
				console.log(this.value);
			},
			// 开户
			openAnCcount() {
				if (
					(this.name == false || this.name == "请输入姓名") ||
					(this.nameNum == false || this.nameNum == "请输入身份证号码") ||
					(this.bank == false) || (this.value == false || this.value == "请输入身银行预留手机号码") || this.isRadio == false
				) {
					this.isOpenAnCcount = true
					console.log(this.value)
				} else {
					//发送请求
					console.log("88888")
				}
			}

		}

	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fafafa;
	}

	.openanaccount_counter {
		background-color: #fafafa;
		padding: 40rpx 24rpx;

		.BaseInformation {
			margin-top: 40rpx;

			.title {
				font-size: 40rpx;
				font-weight: 600;
			}

			.Info {
				margin-top: 24rpx;
				border-radius: 15rpx;
				background-color: #ffffff;
				//height: 100rpx;
				padding: 0rpx 37rpx;

				.first {
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #efefef;
					padding: 40rpx 0rpx;

					.left {
						font-weight: 600;
						font-size: 32rpx;
					}

					.right {
						color: #cdcdcd;
						font-size: 28rpx;

						#tan {

							input {

								margin: 0 auto;
								background-color: #e8e8e8;
								width: 80%;
								height: 60rpx;
							}
						}
					}
				}
			}
		}

		.content {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: space-between;
			//border: 1px solid red;
			height: 100%;

			.title {
				font-size: 36rpx;
				font-weight: 550;
				margin-top: 48rpx;
			}

			.confrim-btn {
				width: 100%;
				justify-content: space-around;
				height: 100rpx;
				border-top: 1px solid #efefef;

				button {
					width: 50%;
					background-color: #ffffff;
				}

				button::after {
					border: none;
				}

				.quxiao::after {
					border-left: 1px solid #efefef;
				}

				.queding {
					color: #999999;
					font-size: 36rpx;
				}

				.quxiao {
					color: #ff4658;
					font-size: 36rpx;
				}
			}

			.input {
				height: 100rpx;
			}

			.center_open {
				padding: 10rpx 20rpx;
				color: #999999;
				color: 28rpx;
			}
		}

		.changePhone {
			padding: 28rpx 10rpx;
			color: #ff4658;
		}

		.foot {
			border-radius: 15rpx;
			background-color: #ffffff;
			margin-top: 300rpx;
			overflow: hidden;

			.top {
				padding: 24rpx 16rpx;

				.radio {
					radio {
						transform: scale(0.7);
					}

					.title1 {
						margin-left: 24rpx;
						font-size: 24rpx;
						color: #999999;
					}

					.title2 {
						font-size: 24rpx;
						color: #333333;
						margin-left: 15rpx;
					}
				}
			}

			.bottom {

				background-color: #ff4658;
				text-align: center;
				height: 100rpx;
				line-height: 100rpx;

				text {
					color: #ffffff;
					font-size: 36rpx;

				}
			}
		}
	}
</style>
